@use "sass:math";
$toast-width: 240px;
$toast-border-color: $bg-menu;

#toast{
  z-index: $z-mask;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(15px) saturate(180%);
  -webkit-backdrop-filter: blur(15px) saturate(180%);
}

.mask{}

.toast{
  overflow: hidden;
  z-index: $z-toast;
  position: fixed;
  border: 1px solid $toast-border-color;
  background-color: $bg-main;
  @include border-radius(8px);
  width: $toast-width;
  left: 50%;
  margin-left: math.div(-$toast-width, 2);
  margin-top: -50px;
  top: 50%;
  color: $color-main;
  &-header{
    color: white;
    font-weight: bold;
    font-size: $fz-title;
    padding-top: 20px;
    text-align: center;
  }
  &-body{
    color: white;
    font-size: $fz-list-content;
    text-align: center;
    padding-bottom: 20px;
  }
  &-footer{
    border-top: 1px solid $toast-border-color;
    display: flex;
    flex-flow: row nowrap;
    div{
      @extend .unselectable;
      cursor: pointer;
      text-align: center;
      padding: 10px;
      flex-grow: 1;
      display: block;
      &:active{
        background-color: $toast-border-color;
      }
    }
    .btn-cancel{
    }
    .btn-confirm{
      border-left: 1px solid $toast-border-color;
    }
  }
}

/**
弹窗和 toast
 */
.pop-msg{
  z-index: 1000;
  position: fixed;
  top: 100px;
  min-width: 300px;
  transform: translateX(-50%);
  left: 50%;
  padding: 20px 30px;
  text-align: center;
  //background-color: $color-main;
  @include backdrop-filter(blur(20px) saturate(180%));
  @include border-radius($radius-pc);
  border: 1px solid transparentize($color-border, 0.9);
  h3{
    color: white;
    line-height: 25px;
    font-size: $fz-label;
  }
  &.pop-msg-default { background-color: transparentize(white,0.2); }
  &.pop-msg-warning { background-color: transparentize($yellow,0.2); }
  &.pop-msg-success { background-color: transparentize($green,0.2); }
  &.pop-msg-danger  { background-color: transparentize($red,0.2); }
}


@-webkit-keyframes slideInDownPopMessage {
  from {
    -webkit-transform: translate3d(0, -100%, 0) translateX(-50%);
    transform: translate3d(0, -100%, 0) translateX(-50%);
    visibility: visible;
    opacity: 0;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0) translateX(-50%);
    transform: translate3d(0, 0, 0) translateX(-50%);
    visibility: visible;
    opacity: 1;
  }
}

@keyframes slideInDownPopMessage {
  from {
    -webkit-transform: translate3d(0, -100%, 0) translateX(-50%);
    transform: translate3d(0, -100%, 0) translateX(-50%);
    visibility: visible;
    opacity: 0;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0) translateX(-50%);
    transform: translate3d(0, 0, 0) translateX(-50%);
    visibility: visible;
    opacity: 1;
  }
}

.slideInDownPopMessage {
  -webkit-animation-name: slideInDownPopMessage;
  animation-name: slideInDownPopMessage;
}


@-webkit-keyframes slideOutUpPopMessage {
  from {
    -webkit-transform: translate3d(0, 0, 0) translateX(-50%);
    transform: translate3d(0, 0, 0) translateX(-50%);
  }

  to {
    visibility: hidden;
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0) translateX(-50%);
    transform: translate3d(0, -100%, 0) translateX(-50%);
  }
}

@keyframes slideOutUpPopMessage {
  from {
    -webkit-transform: translate3d(0, 0, 0) translateX(-50%);
    transform: translate3d(0, 0, 0) translateX(-50%);
  }

  to {
    visibility: hidden;
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0) translateX(-50%);
    transform: translate3d(0, -100%, 0) translateX(-50%);
  }
}

.slideOutUpPopMessage {
  -webkit-animation-name: slideOutUpPopMessage;
  animation-name: slideOutUpPopMessage;
  animation-fill-mode: forwards;
}


